<template>
  <div class="page">
    <div class="box-step">
      <el-steps :active="2" align-center finish-status="success">
        <el-step title="选择主体类型" />
        <el-step title="填写资料" />
        <el-step title="审核结果" />
      </el-steps>
    </div>
    <div class="result">
      <div v-if="applyment_state === 'APPLYMENT_STATE_EDITTING'">
        <div class="result-icon">
          <svg-icon class="edit" icon-class="ic_edit" />
        </div>
        <p class="msg">编辑中，未提交</p>
        <p><a class="btn-fresh" @click="toEdit">返回编辑</a></p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_AUDITING'">
        <div class="result-icon">
          <svg-icon class="audit" icon-class="ic_audit" />
        </div>
        <p class="msg">申请单正在审核中，请耐心等待</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="doRefresh">刷新状态</a></p>
        <p class="time-update">{{ update_time }} 更新</p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_REJECTED'">
        <div class="result-icon">
          <svg-icon class="reject" icon-class="ic_reject" />
        </div>
        <p class="msg">已驳回，请按照驳回原因修改申请资料</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="toEdit">返回编辑</a></p>
        <p class="time-update">{{ update_time }} 更新状态</p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_TO_BE_CONFIRMED'">
        <div class="result-icon">
          <svg-icon class="audit" icon-class="ic_audit" />
        </div>
        <p class="msg">待账户验证，请法人扫码，根据页面指引完成账户验证</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="doRefresh">刷新状态</a></p>
        <p class="time-update">{{ update_time }} 更新</p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_TO_BE_SIGNED'">
        <div class="result-icon">
          <svg-icon class="audit" icon-class="ic_audit" />
        </div>
        <p class="msg">待签约，请法人扫码，根据页面指引完成签约</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="doRefresh">刷新状态</a></p>
        <p class="time-update">{{ update_time }} 更新</p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_SIGNING'">
        <div class="result-icon">
          <svg-icon class="audit" icon-class="ic_audit" />
        </div>
        <p>系统开通相关权限中，请耐心等待</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="doRefresh">刷新状态</a></p>
        <p class="time-update">{{ update_time }} 更新</p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_CANCELED'">
        <div class="result-icon">
          <svg-icon class="reject" icon-class="ic_reject" />
        </div>
        <p class="msg">已作废，申请单已被撤销</p>
        <p class="time-add">提交时间：{{ add_time }}</p>
        <p><a class="btn-fresh" @click="toEdit">重新进件</a></p>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_FINISHED'">
        <div class="result-icon">
          <svg-icon class="finish" icon-class="ic_success" />
        </div>
        <p>审核通过，商户号已开通</p>
      </div>
    </div>
    <div v-if="applyment_state && applyment_state !== 'APPLYMENT_STATE_AUDITING'" class="info">

      <div v-if="applyment_state === 'APPLYMENT_STATE_REJECTED'" class="form">
        <div class="form-block-hd"><span>驳回原因</span></div>
        <div class="form-block">
          <div v-for="item in audit_detail">
            <h2 class="form-block__title">{{ item['field_name'] }}</h2>
            <div class="box-input">
              <span style="color: red; font-size: 14px;">{{ item['reject_reason'] }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_TO_BE_SIGNED' || applyment_state === 'APPLYMENT_STATE_TO_BE_CONFIRMED'" class="form">
        <div class="form-block-hd"><span>请法人微信扫码</span></div>
        <div class="form-block">
          <div class="box-input" style="text-align: center;">
            <!--<vue-qr :text="sign_url" :size="200" />-->
            <img :src="sign_url" style="width: 200px; height: 200px;" />
          </div>
        </div>
      </div>
      <div v-if="applyment_state === 'APPLYMENT_STATE_FINISHED'" class="form">
        <div class="form-block-hd"><span>微信商户号</span></div>
        <div class="form-block">
          <h2 class="form-block__title">特约商户号</h2>
          <div class="box-input">
            {{ sub_mchid }}
          </div>
          <h2 class="form-block__title">费率</h2>
          <div class="box-input">
            {{ rate }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import vueQr from 'vue-qr'
import { getApplyResult } from '@/api/h5/jinjian_wxpay'

export default {
  name: 'H5JinjianWxpayResult',
  components: {
    vueQr: vueQr
  },
  data() {
    return {
      shop_id: 0,
      subject_type: '',
      applyment_state: '',
      applyment_state_msg: '',
      sub_mchid: '',
      rate: '',
      sign_url: '',
      audit_detail: [],
      add_time: '',
      update_time: ''
    }
  },
  mounted() {
    this.shop_id = this.$route.query.shop_id
    this.getApplyResult()
  },
  methods: {
    getApplyResult(refresh = 0) {
      getApplyResult({ shop_id: this.shop_id, refresh: refresh }).then(res => {
        this.subject_type = res.data.subject_type
        this.applyment_state = res.data.applyment_state
        this.applyment_state_msg = res.data.applyment_state_msg
        this.sub_mchid = res.data.sub_mchid
        this.rate = res.data.rate
        this.sign_url = res.data.sign_url
        this.audit_detail = res.data.audit_detail
        this.add_time = res.data.add_time
        this.update_time = res.data.update_time
      })
    },
    toEdit() {
      if (!this.shop_id) {
        this.$message.error('缺少shop_id参数，请重新打开')
        return
      }
      this.$router.replace({
        name: 'H5JinjianWxpayForm',
        query: { shop_id: this.shop_id, subject_type: this.subject_type }
      })
    },
    doRefresh() {
      this.getApplyResult(1)
    }
  }
}
</script>
<style lang="scss" scoped>
  .page {
    background-color: #3cb275;
  }
  .result {
    background: #fff;
    text-align: center;
    padding: 30px 10px 10px 10px;

    .result-icon {
      width: 100%;
      font-size: 44px;
      .edit {
        color: #666;
      }
      .audit {
        color: #3cb275;
      }
      .reject {
        color: #fd5151;
      }
      .finish {
        color: #3cb275;
      }
    }
    .msg {
      font-size: 16px;
      line-height: 1.6;
      padding: 0 25px;
    }
    .time-add {
      font-size: 13px;
      color:#999;
    }
    .time-update {
      font-size: 12px;
      color:#999;
    }
    .btn-fresh {
      display: block;
      background: #fff;
      border: 1px solid #3cb275;
      color: #3cb275;
      font-size: 14px;
      width: 144px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin: 30px auto 0 auto;
      border-radius: 4px;
    }
  }
  .info {
    border-top: 15px solid #f3f6f9;
  }
  .form-block {
    background-color: #fff;
    padding: 0 20px 15px 20px;
    margin-bottom: 10px;
  }
  .form-block-hd {
    height: 48px;
    background: #fff;
    font-weight: bold;
    font-size: 15px;
    padding: 16px 10px;
    span {
      padding-left: 7px;
      border-left: 3px solid #44b549;
    }
  }
  .form-block__title {
    margin: 0;
    padding: 12px 0 12px;
    color: #333;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
  .box-input {
    padding: 0 0 10px 0;
  }
</style>
<style lang="scss">
  .box-step {
    padding: 20px 0;
  }
  .el-step__head.is-success {
    color: #fff;
    border-color: #fff;
    .el-step__icon.is-text {
      background: #3cb371;
    }
    .el-step__icon-inner.is-status {
      transform: scale(0.8);
    }
  }
  .el-step__head.is-process {
    color:#fff;
    .el-step__icon.is-text {
      background-color: #3cb275;
      color: #3cb275;
    }
  }
  .el-step__head.is-wait {
    color: #3f784d;
    .el-step__icon.is-text {
      background-color: #3f784d;
      border-color: #3f784d;
    }
  }
  .el-step__icon.is-text {
    border: 1px solid #fff;
    background: #fff;
    width: 14px;
    height: 14px;
    font-size: 12px;
    overflow: hidden;
  }
  .el-step__icon-inner {
    font-weight: normal;
  }
  .el-step__title {
    font-size: 12px;
    font-weight: 100;
  }
  .el-step__title.is-success {
    color: #fff;
  }
  .el-step__title.is-process {
    color: #fff;
    font-weight: bold;
  }
  .el-step__title.is-wait {
    color: #ddd;
  }
  .el-step.is-horizontal .el-step__line {
    background: rgba(63, 120, 77, 0.9);
    height: 1px;
  }
  .el-step__head.is-success .el-step__line {
    background: rgba(255,255,255,0.5);
  }
  .el-step__line-inner {
    display: none;
  }
</style>
